<template>
	<view class="home-view">
		<swiper class="swiper" vertical>
			<swiper-item class="swiper-item">
				<image class="top-bg" :src="imageUrl + '/home/home-top-bg.png'" mode="heightFix"></image>
				<view class="item-box">
					<view class="swiper-windows" @click="goToUrl('personalizedMap')">
						<image class="windows-image-1" :style="status == 1 ? 'opacity: 1;' : 'opacity: 0;'"
							:src="imageUrl + '/home/home-windows-image-1.png'">
						</image>
						<image class="windows-image-2" :style="status == 2 ? 'opacity: 1;' : 'opacity: 0;'"
							:src="imageUrl + '/home/home-windows-image-2.png'">
						</image>
						<image class="windows-image-3" :style="status == 3 ? 'opacity: 1;' : 'opacity: 0;'"
							:src="imageUrl + '/home/home-windows-image-3.png'">
						</image>
						<image class="windows-image-4" :style="status == 4 ? 'opacity: 1;' : 'opacity: 0;'"
							:src="imageUrl + '/home/home-windows-image-4.png'">
						</image>
						<image class="windows-image-5" :style="status == 5 ? 'opacity: 1;' : 'opacity: 0;'"
							:src="imageUrl + '/home/home-windows-image-5.png'">
						</image>
						<image class="windows-mask" :src="imageUrl + '/home/home-windows-mask.png'"></image>
						<image class="windows-bg" :src="imageUrl + '/home/home-windows-bg.png'"></image>
					</view>
				</view>
				<view class="title-image">
					<image :src="imageUrl + '/home/title-image.png'" mode="widthFix"></image>
				</view>
				<view class="tips-box flex-box-space-between">
					<image :src="imageUrl + '/home/tips-icon.png'"></image>
					<u-notice-bar style="flex: 1;" :icon="' '" :text="tipsList" direction="column" fontSize="26rpx"
						bgColor="transparent" color="#000000" @click="onNotice" duration="4000"></u-notice-bar>
				</view>
				<view class="vote-btn" @click="goToUrl('voteView')">
					<image :src="imageUrl + '/vote-btn-image.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		wxLogin
	} from "@/api/public/index.js"
	import {
		getHomeNotice
	} from "@/api/home/home.js"
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,
				isShow: true,
				status: 1,
				times: null,
				isVote: '',
				tipsList: ['长沙学院第三届“月湖杯”3D大赛网络投票开始啦~', '古村古镇虚拟旅游理论、方法及实现成果展示'],
			};
		},

		onLoad() {
			this.isVote = this.$Route.query.isVote
			this.getCode()
			this.getHomeNotice()
			this.times = setInterval(() => {
				this.setWindowsImage()
			}, 3000)
		},
		onUnload() {
			this.times = null
			clearInterval(this.times)
		},
		methods: {
			// 获取code登录
			getCode() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					success: res => {
						this.code = res.code
						this.wxLogin()
					},
					fail: err => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			// 登录请求
			async wxLogin() {
				console.log(this.code)
				let res = await wxLogin(this.code, this.$appID)
				console.log(res.data)
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('wxUser', res.data.wxUser);
				uni.setStorageSync('openId', res.data.openId);
				uni.hideLoading()
				if (this.isVote == 'vote') {
					this.goToUrl('voteView')
				}
			},
			async getHomeNotice() {
				let res = await getHomeNotice()
				this.tipsList = res.data
			},
			setWindowsImage() {
				if (this.status == 5) {
					this.status = 1
				} else {
					this.status++
				}
			},
			onNotice(e) {
				if (e == 0) {
					this.goToUrl('voteView')
				} else if (e == 1) {
					this.goToUrl('homeType')
				}
			},
			goToUrl(urlName, params = {}) {
				this.$Router.push({
					name: urlName,
					params
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-notice-bar {
		padding: 0 !important;
	}

	.home-view {
		width: 100vw;
		height: 100vh;
	}

	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		position: relative;
		width: 100%;
		height: 100%;

		.item-box {
			position: relative;
			width: 100%;
			height: 100%;
			background: url("https://xnlv.lizxx.com/image/xnlv/static/home/home-bg-1.png") no-repeat;
			background-size: 100% 100%;

			.swiper-windows {
				height: 546rpx;
				position: absolute;
				top: 48%;
				transform: translateY(-50%);
				width: 100%;

				.windows-image-1,
				.windows-image-2,
				.windows-image-3,
				.windows-image-4,
				.windows-image-5 {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 520rpx;
					height: 520rpx;
					opacity: 1;
					transition: all 3s;
				}

				.windows-image-1 {
					z-index: 5;
				}

				.windows-image-2 {
					z-index: 4;
				}

				.windows-image-3 {
					z-index: 3;
				}

				.windows-image-4 {
					z-index: 2;
				}

				.windows-image-5 {
					z-index: 1;
				}

				.windows-bg,
				.windows-mask {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 546rpx;
					height: 546rpx;
					z-index: 99;
				}
			}
		}
	}

	.top-bg {
		position: absolute;
		top: 8%;
		left: 0;
		height: 358rpx;
		z-index: 9;
	}

	.title-image {
		position: absolute;
		bottom: 29%;
		left: 50%;
		transform: translateX(-50%);

		image {
			width: 340rpx;
		}
	}

	.tips-box {
		position: absolute;
		bottom: 18%;
		left: 50%;
		transform: translateX(-50%);
		width: 702rpx;
		height: 82rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 12rpx;
		padding: 0 0 0 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #000000;
		font-weight: bold;

		image {
			width: 54rpx;
			height: 54rpx;
		}
	}

	.vote-btn {
		position: absolute;
		bottom: 5.5%;
		left: 50%;
		transform: translateX(-50%);

		image {
			width: 520rpx;
		}
	}
</style>